import React from 'react'
// ===================================================================== Temp
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $fn, $http, $Lazy } = window
// ===================================================================== $Lazy
const Page 						= $Lazy.load(()=>import('#tp/page/page-container'))
const confirm 					= $Lazy.file(()=>import('@antd/confirm'))
const Image 					= $Lazy.load(()=>import('@antd/image'))
const EmpowerModal				= $Lazy.state(()=>import('./empower-modal'))
const HistoryVersionModal		= $Lazy.state(()=>import('./history-version-modal'))
const ShareRecordModal			= $Lazy.state(()=>import('./share-record-modal'))
const VersionModal				= $Lazy.state(()=>import('./version-modal'))
// ===================================================================== component
class Index extends React.Component{
	state={
		src: '',
		isEdit: false,	// 编辑还是预览
		showEdit: false,	// 是否展示编辑和预览
		isImg: false,	// 文件格式是否为图片
		row: {},
		historyData: [],
		shareData: [],
		showEmpower:$fn.query().showEmpower==='true'?true:false,
	}
	key=-1
	componentDidMount(){
		this.fileInfo()
	}
	fileInfo = () => {
		// let { uuid, isEdit, showEdit, showEmpower, folder } = this.props
		let { uuid, isEdit, showEdit, showEmpower, folder } = $fn.query()
		isEdit = isEdit==='true'?true:false
		showEdit = showEdit==='true'?true:false
		showEmpower = showEmpower==='true'?true:false
		folder = folder==='true'?true:false
		$http.submit(null,'doc-file-list/info',{param:{uuid}}).then(data=>{
			this.row = data
			const arr = ['png', 'jpg','jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
			let isImg = false
			if(arr.includes(data.file_type)){
				isImg = true
				showEdit = false
			}else if(['pdf'].includes(data.file_type)){
				showEdit = false
			}
			this.setState({isEdit,showEdit,isImg,row:data, showEmpower, folder})
			this.preview()
			this.historyRecord()
			this.shareRecord()
		})
	}
	
	preview = () => {
		const { row,isEdit } = this.state
		$http.submit(null,'doc-file-list/edit',{param:{uuid:row.uuid,file_type:row.file_type,handle:isEdit?'write':'read'}}).then(data=>{
			this.setState({src:data[0],isEdit:isEdit})
		})
	}
	
	historyRecord = () => {		//历史记录
		$http.pull(null,'doc-file-version/index',{param:{uuid:this.row.uuid}}).then(data=>{
			if($fn.hasArray(data)){
				const arr = data.slice(0,2)
				this.setState({historyData:arr})
			}
		})
	}
	shareRecord = () => {		// 共享记录
		$http.pull(null,'doc-file-share-log/shareList',{param:{uuid:this.row.uuid}}).then(data=>{
			if($fn.hasArray(data)){
				const arr = data.slice(0,2)
				this.setState({shareData:arr})
			}
		})
	}
	
	
	controls = () => {	// 操作按钮
		return [
			this.state.showEdit && !this.state.isEdit && Controls.click.call(this, '在线编辑', ()=> {
				const { uuid, file_type } = this.state.row
				$http.submit(null,'doc-file-list/edit',{param:{uuid,file_type,handle:'write'}}).then(data=>{
					this.setState({src:data[0],isEdit:true})
				})
				this.key--
			} ),
			this.state.showEdit && this.state.isEdit && Controls.click.call(this, '在线预览', ()=> {
				const { uuid, file_type } = this.state.row
				$http.submit(null,'doc-file-list/edit',{param:{uuid,file_type,handle:'read'}}).then(data=>{
					this.setState({src:data[0],isEdit:false})
				})
				this.key--
			} ),
			Controls.click.call(this,'下载文件',() => {
				$http.submit(null,'doc-file-list/download',{param:{uuids:[this.state.row.uuid]}}).then((data)=>{
					data.forEach(v=>window.open(v))
				})
			}),
			this.state.showEmpower && Controls.click.call(this, '共享', ()=> this.empowerModal.open([this.state.row]) ),
			Controls.click.call(this, '历史版本', ()=> this.historyVersionRef.open(this.state.row.uuid) ),
			// Controls.click.call(this, '返回', ()=> {
			// 	window.folderType = -1
			// 	window.updateFolder()
			// },{ghost:true} ),this.props.history.goBack()
			// Controls.back.call(this),	// 返回
			Controls.click.call(this, '返回', ()=> this.props.history.go(this.key), {ghost:true, } ),
		]
	}
	
	cancelShare = (row) => {		// 取消共享
		confirm.then( f => {
			f({
				msg:'是否取消共享？',
				onOk: async close => {
					$http.submit(null,'doc-file-share-log/cancel',{ param:{ uuid:row.uuid}, loadingText:`取消共享中`}).then(data=>{
						close()
						$fn.msg.success('取消共享成功')
						this.shareRecord()
					})
				}
			})
		})
	}
	
	versionFile = (row) => {		// 版本
		$http.submit(null,'doc-file-version/review',{ param:{ version:row.version,file_id:this.row.uuid},}).then(data=>{
			if($fn.hasArray(data)){
				this.versionRef.open(data[0],row.file_name,row.version)
			}
		})
	}
	
	render(){
		const { src, isImg, row, shareData, historyData, showEmpower } = this.state
		return (
			<>
				<Page title={row.file_name} controls={this.controls()}>
					<div className='ex plr10 fxj h'>
						<div className='ex ptb5 pr5'>
							{ isImg ?
								<div className ='wh'><Image className='wh' preview={false} src={ src }/></div>
								:<iframe title={row.file_name} src={src} width='100%' height='100%' />
							}
						</div>
						<div className='lbor1 fv bbor1 h oys scrollbar' style={{width:'20%'}}>
							<div className='fv bbor1 pb20'>
								<div className='plr10 mtb5 fxmj'>
									<div>历史记录</div>
									<div className='fx'>
										<span className='c0 cp mr10' onClick={this.historyRecord}>刷新</span>
										<span className='c0 cp' onClick={()=>this.historyVersionRef.open(row.uuid)}>更多</span>
									</div>
								</div>
								<div className='pl20'>
									{$fn.hasArray(historyData) ? historyData.map((v,i)=>(
										<div className='fv lbor1 pb10 plr10 rel'>
											<div className='f12 g9'>{v.created_at}</div>
											<div>操作人 <span className='b'>{v.real_name}</span></div>
											<div className='fxmj'><span>{v.file_name}</span><span className='c0 cp' onClick={()=>this.versionFile(v)}>第{v.version}版</span></div>
											<div className='r10px abs bcm' style={{minWidth:'20px',minHeight:'20px',transform: 'scale(.3)',left:'-10px',top:'0px',boxShadow: '0 0 20px rgba(32, 143, 160, .6)'}}></div>
										</div>
										)) : <div className='tc mtb10'> 暂无历史记录 </div>
									}
								</div>
							</div>
							<div className='fv pb20'>
								<div className='plr10 mtb5 fxmj'>
									<div>共享记录</div>
									<span className='c0 cp' onClick={()=>this.shareRecordRef.open(row.uuid,showEmpower)}>更多</span>
								</div>
								<div className='pl20'>
									{$fn.hasArray(shareData) ? shareData.map((v,i)=>(
										<div className='fv lbor1 pb10 plr10 rel'>
											<div className='f12 g9'>{v.created_at}</div>
											<div>共享给 <span className='b'>{$fn.hasArray(v.shareTo)?v.shareTo.join('、'):''}</span></div>
											<div>权限 - <span className='b'>{$fn.hasArray(v.share_perms)?v.share_perms.join('、'):''}</span></div>
											{showEmpower && <div className='c0 pb10 pt5'>
												<span className='cp' onClick={()=>this.empowerModal.open([v],true)}>权限</span>&nbsp;&nbsp;|&nbsp;&nbsp;
												<span className='cp' onClick={()=>this.cancelShare(v)}>删除记录</span>
											</div>}
											<div className='r10px abs bcm' style={{minWidth:'20px',minHeight:'20px',transform: 'scale(.3)',left:'-10px',top:'0px',boxShadow: '0 0 20px rgba(32, 143, 160, .6)'}}></div>
										</div>
										)): <div className='tc mtb10' >暂无共享记录</div>
									}
								</div>
							</div>
						</div>
					</div>
				</Page>
				{/* 授权 */}
				<EmpowerModal onRef={ref=>this.empowerModal=ref} onRefresh={this.shareRecord} />
				{/* 历史版本 */}
				<HistoryVersionModal onRef={ref=>this.historyVersionRef=ref } onRefresh={this.fetch} />
				{/* 共享记录 */}
				<ShareRecordModal onRef={ref=>this.shareRecordRef=ref } onRefresh={this.shareRecord} isPower={showEmpower} />
				{/* 历史版本详情 */}
				<VersionModal onRef={ref=>this.versionRef=ref } />
			</>
		)
	}
}
export default Index